<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRouter} from "vue-router";
import myAxios from "../plugins/my-axios.ts";

const activeP = ref("")
onMounted(async ()=>{
  activeP.value = String( localStorage.getItem('activePath'))
  const res =await myAxios.get("/user/admin/current");
  if (res.data.code !== 0) {
    ElMessage.error(res.data.description)
     localStorage.clear()
  }
  avatarUrl.value=res.data.data.avatarUrl

})
const saveNavState = (activePath: string) => {
  window. localStorage.setItem('activePath', activePath)
  activeP.value = activePath
}
const avatarUrl=ref('')
let router = useRouter();
const logout = () => {
  ElMessageBox.confirm(
      '确认退出',
      {
        confirmButtonText: 'OK',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
         localStorage.clear()
        router.push('/login')
        ElMessage({
          type: 'success',
          message: '退出成功',
        })
      })
}
</script>

<template>
  <el-menu
      :default-active="activeP"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      router
  >
    <el-menu-item index="dashboard" @click="saveNavState('dashboard')">
      <img
          style="width: 40px"
          src="/dream_icon.png"
          alt="Element logo"
      />
      <h3>
        梦想搭档管理系统
      </h3>
    </el-menu-item>
    <div class="flex-grow"/>
    <el-menu-item index="dashboard" @click="saveNavState('dashboard')">首页</el-menu-item>
    <el-menu-item index="user" @click="saveNavState('user')">用户管理</el-menu-item>
<!--    <el-menu-item index="blog" @click="saveNavState('wnzz')">文章管理</el-menu-item>-->
    <el-menu-item index="test" @click="saveNavState('wnzz')">文章管理</el-menu-item>
    <el-sub-menu>
      <template #title>
        <el-avatar :src="avatarUrl"></el-avatar>
      </template>
      <el-menu-item @click="logout">退出系统</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
